import  React , { lazy, useEffect } from "react";
import { useRoutes , Navigate,useLocation, useNavigate} from "react-router-dom";
import Login from '../views/Login/Login';
import Home from '../views/Home/Home';
import Layout from '../components/layout/index'
import Go from '../views/Go/Go'
// 原来的引入方法  这样引入会把所有的组件都打包到一个文件当中 会导致文件越来越大 首次加载的时候
// 会把很多不会立即使用到的组件也一并加载了
// import Room from "../views/Room/Room";
// import Build from "../views/Build/Build";

// 推荐除了首页和一些非常必要组件 使用  上面的方式引入以外其他的都通过 react 的lazy的方式引入
// lazy方式的引入会把单独的组件 打包成一个单独的文件 并且仅在需要使用的时候才会动态加载
// 俗称路由(组件)的懒加载
// 这也是面试当中 问到如何实现react的应用的优化的答案之一
const  Room  = lazy(() => import('../views/Room/Room'));
const  Build  = lazy(() => import('../views/Build/Build'));
const  RoomList = lazy(()=> import('../views/RoomList/RoomList'))

// 独立页面
const frameOut = [
  { path: '/login', element: <Login />  },
  { path: '/go', element: <Go />}
]



// 功能页面
const frameIn = [
    { path: 'index', element: <Home /> } ,
    { path: 'setroom', element: <Room /> },
    { path: 'setbuild', element: <Build />, auth:'admin' },
    { path:'roomlist',element: <RoomList /> },
    { path: '*', element: <Navigate to="/index" /> }
]


const NoWelCome = ()=>{

  const navigate = useNavigate();

 
  useEffect(()=>{
    // 两秒后直接调回到首页
    setTimeout(()=> navigate('/index',{replace:true}),2000)
  },[])
  return <div>非法访问</div>
}



const Router = ()=>{


  const loc  = useLocation();
  const { pathname } = loc;  // 从当前的location当中获取 路径名称

  // const [role,setRole] = useState('') // 当前的登录的用户的角色
  // 假设在登录的时候 就会返回用户的角色 然后存储在localStorage
  let role = localStorage.getItem('role');
  role = role || 'normal';


  // useEffect(()=>{
  //     console.log('路由有变化',loc)
  // },[loc])

    // 允许我们通过一个数组的方式来进行路由的配置
    // 通过这种方式  能更好的让我们进行模块化的开发 灵活的进行路由 配置
    

  let element = useRoutes([
    ...frameOut,
    { path: '/', element: <Navigate to="/index" /> }, // 进入到首页的话 就重定向到 /index
    { path: "/*", element: <Layout /> , children: frameIn},  
    
  ]);




  // 只有管理员登录的时候才能进入到这个 楼栋楼层管理

  // 从pathname 当中看一下现在匹配的路由信息是哪一个

  // 如果是 登录页或者是跳转页 正常返回要渲染的路由
  if(['/login','/go'].includes(pathname))   return element

  // 面试局当中问你如何实现路由守卫的简易回答   使用v6的路由的useRoutes来配置路由信息，所以可以在在返回useRouters可以根据不同的用户角色身份了
  // 动态的调整useRouters当中的渲染信息

 // role
 // 先过滤出不需要权限的路
//  const noauth = frameIn.filter(item=>!item.auth);
  const newfamein = frameIn.map(item=>{
    if(!item.auth) return item;
    if(item.auth !== role) return {...item,element:<NoWelCome />}
    return item;
  });

  element =  useRoutes([
    ...frameOut,
    { path: '/', element: <Navigate to="/index" /> }, // 进入到首页的话 就重定向到 /index
    { path: "/*", element: <Layout /> , children: newfamein},  
  ])


  return element;
 

  
  
  


}

export default Router;





